
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>doc/api/overlays-api.js - jsplumb API documentation</title>

    

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
<link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../css/jsplumb-doc.css">

    <!-- yuidoc -->
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">

    <link rel="stylesheet" href="../../css/external/cssgrids-min.css">
    <link rel="stylesheet" href="../../css/external/prettify-min.css">

    <link rel="shortcut icon" type="image/png" href="../../img/favicon.png">
    <script src="https://yui-s.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
    <style>
        #doc {
            text-align:left;
            margin-top:44px;
        }
    </style>
</head>
<body class="yui3-skin-sam">

    <div class="navbar navbar-top navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="/"><img src="../../img/logo-medium-jsplumb.png"></a>
            <div class="community"></div>

        </div>

        <div class="navbar-collapse collapse nav-wrapper">
            <ul class="nav navbar-nav">
                <li><a href="../../">DEMOS</a></li>
                <li><a href="../../doc/home.html">DOCS</a></li>
                <li><a href="../../apidocs/index.html">API</a></li>
                <li><a href="../../download">DOWNLOAD</a></li>
                <li><a href="http://beta.jsplumbtoolkit.com/contact.html">CONTACT</a></li>
                <li><a href="https://blog.jsplumbtoolkit.com">BLOG</a></li>

            </ul>

            <div class="social-nav hidden-xs">
                <a href="http://twitter.com/jsplumblib" class="link"><span class="icon-twitter"></span></a>
                <a href="http://github.com/sporritt/jsplumb/" class="link"><span class="icon-github"></span></a>
                <a href="http://www.linkedin.com/company/jsplumb" class="link"><span class="icon-linkedin"></span></a>

            </div>
        </div><!--/.nav-collapse -->
    </div>
</div>

    <div class="container">
        <div class="row">
            <div id="doc">
    <div id="bd" class="yui3-g">
        <div class="yui3-u-1-4">
            <div id="docs-sidebar" class="sidebar apidocs">
                <div id="api-list">
    <h2 class="off-left">APIs</h2>
    <div id="api-tabview" class="tabview">
        <ul class="tabs">
            <li><a href="#api-classes">Classes</a></li>
            <li><a href="#api-modules">Modules</a></li>
        </ul>

        <div id="api-tabview-filter">
            <input type="search" id="api-filter" placeholder="Type to filter APIs">
        </div>

        <div id="api-tabview-panel">
            <ul id="api-classes" class="apis classes">
            
                <li><a href="../classes/Anchors.Assign.html">Anchors.Assign</a></li>
            
                <li><a href="../classes/Anchors.AutoDefault.html">Anchors.AutoDefault</a></li>
            
                <li><a href="../classes/Anchors.Bottom.html">Anchors.Bottom</a></li>
            
                <li><a href="../classes/Anchors.BottomCenter.html">Anchors.BottomCenter</a></li>
            
                <li><a href="../classes/Anchors.BottomLeft.html">Anchors.BottomLeft</a></li>
            
                <li><a href="../classes/Anchors.BottomRight.html">Anchors.BottomRight</a></li>
            
                <li><a href="../classes/Anchors.Center.html">Anchors.Center</a></li>
            
                <li><a href="../classes/Anchors.Continuous.html">Anchors.Continuous</a></li>
            
                <li><a href="../classes/Anchors.ContinuousBottom.html">Anchors.ContinuousBottom</a></li>
            
                <li><a href="../classes/Anchors.ContinuousLeft.html">Anchors.ContinuousLeft</a></li>
            
                <li><a href="../classes/Anchors.ContinuousRight.html">Anchors.ContinuousRight</a></li>
            
                <li><a href="../classes/Anchors.ContinuousTop.html">Anchors.ContinuousTop</a></li>
            
                <li><a href="../classes/Anchors.Left.html">Anchors.Left</a></li>
            
                <li><a href="../classes/Anchors.LeftMiddle.html">Anchors.LeftMiddle</a></li>
            
                <li><a href="../classes/Anchors.Perimeter.html">Anchors.Perimeter</a></li>
            
                <li><a href="../classes/Anchors.Right.html">Anchors.Right</a></li>
            
                <li><a href="../classes/Anchors.RightMiddle.html">Anchors.RightMiddle</a></li>
            
                <li><a href="../classes/Anchors.Top.html">Anchors.Top</a></li>
            
                <li><a href="../classes/Anchors.TopCenter.html">Anchors.TopCenter</a></li>
            
                <li><a href="../classes/Anchors.TopLeft.html">Anchors.TopLeft</a></li>
            
                <li><a href="../classes/Anchors.TopRight.html">Anchors.TopRight</a></li>
            
                <li><a href="../classes/Connection.html">Connection</a></li>
            
                <li><a href="../classes/Connector.html">Connector</a></li>
            
                <li><a href="../classes/Connectors.Bezier.html">Connectors.Bezier</a></li>
            
                <li><a href="../classes/Connectors.Flowchart.html">Connectors.Flowchart</a></li>
            
                <li><a href="../classes/Connectors.StateMachine.html">Connectors.StateMachine</a></li>
            
                <li><a href="../classes/Connectors.Straight.html">Connectors.Straight</a></li>
            
                <li><a href="../classes/Endpoint.html">Endpoint</a></li>
            
                <li><a href="../classes/Endpoints.Blank.html">Endpoints.Blank</a></li>
            
                <li><a href="../classes/Endpoints.Dot.html">Endpoints.Dot</a></li>
            
                <li><a href="../classes/Endpoints.Image.html">Endpoints.Image</a></li>
            
                <li><a href="../classes/Endpoints.Rectangle.html">Endpoints.Rectangle</a></li>
            
                <li><a href="../classes/jsPlumb.html">jsPlumb</a></li>
            
                <li><a href="../classes/jsPlumbInstance.html">jsPlumbInstance</a></li>
            
                <li><a href="../classes/jsPlumbUIComponent.html">jsPlumbUIComponent</a></li>
            
                <li><a href="../classes/jsPlumbUtil.html">jsPlumbUtil</a></li>
            
                <li><a href="../classes/jsPlumbUtil.EventGenerator.html">jsPlumbUtil.EventGenerator</a></li>
            
                <li><a href="../classes/Overlay.html">Overlay</a></li>
            
                <li><a href="../classes/OverlayCapableJsPlumbUIComponent.html">OverlayCapableJsPlumbUIComponent</a></li>
            
                <li><a href="../classes/Overlays.Arrow.html">Overlays.Arrow</a></li>
            
                <li><a href="../classes/Overlays.Diamond.html">Overlays.Diamond</a></li>
            
                <li><a href="../classes/Overlays.Label.html">Overlays.Label</a></li>
            
                <li><a href="../classes/Overlays.PlainArrow.html">Overlays.PlainArrow</a></li>
            
            </ul>

            <ul id="api-modules" class="apis modules">
            
            </ul>
        </div>
    </div>
</div>

            </div>
        </div>
        <div class="yui3-u-3-4">
                <div id="api-options">
        Show:
        <label for="api-show-inherited">
            <input type="checkbox" id="api-show-inherited" checked>
            Inherited
        </label>

        <label for="api-show-protected">
            <input type="checkbox" id="api-show-protected">
            Protected
        </label>

        <label for="api-show-private">
            <input type="checkbox" id="api-show-private">
            Private
        </label>
        <label for="api-show-deprecated">
            <input type="checkbox" id="api-show-deprecated">
            Deprecated
        </label>

    </div>


            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
                        <h1 class="file-heading">File: doc/api/overlays-api.js</h1>

<div class="file">
    <pre class="code prettyprint linenums">
/**
* Parent for all Overlay types.  The core concept with an Overlay is that of its &#x60;location&#x60;, which is specified
* as follows:
*
* ###### Connectors
*     - a value between 0 and 1 inclusive is a proportional value, relative to the length of the Connector&#x27;s path.
*     - a value greater than 1 or less than 0 is an absolute value (travel along the path inscribed by the Connector)
* 
* For Connectors, the default value is &#x60;0.5&#x60;.
* 
* ###### Endpoints
*     - An array of two values which are proportional to the width and height of the Endpoint.
*
* For Endpoints, the default value is &#x60;[0.5, 0.5]&#x60;.
* @class Overlay
*/

/**
* Draws an arrow, using four points: the head and two tail points, and a &#x60;foldback&#x60; point, which permits the tail of the arrow to be indented.
* @class Overlays.Arrow
* @constructor
* @param {Object} params Constructor parameters
* @param {Integer} [params.width=20] Width of the tail of the arrow
* @param {Integer} [params.length=20] Distance from the tail of the arrow to the head
* @param {Float} [params.location=0.5] Where, either as a proportional value from 0 to 1 inclusive, or as an absolute value (negative values mean distance from target; positive values greater than 1 mean distance from source) the Arrow should appear on the Connector
* @param {Integer} [params.direction=1] Which way to point. Allowed values are 1 (the default, meaning forwards) and -1, meaning backwards
* @param {Float} [params.foldback=0.623] How far along the axis of the arrow the tail points foldback in to.
* @param {Object} [params.paintStyle] A style object in the form used for paintStyle values for Endpoints and Connectors.
*/

/**
* This is just a specialized instance of Arrow in which jsPlumb hardcodes &#x60;foldback&#x60; to 1, meaning the tail of the Arrow is a flat edge
* @class Overlays.PlainArrow
* @constructor
* @param {Object} params Constructor parameters
* @param {Integer} [params.width=20] Width of the tail of the arrow
* @param {Integer} [params.length=20] Distance from the tail of the arrow to the head
* @param {Float} [params.location=0.5] Where, either as a proportional value from 0 to 1 inclusive, or as an absolute value (negative values mean distance from target; positive values greater than 1 mean distance from source) the PlainArrow should appear on the Connector
* @param {Integer} [params.direction=1] Which way to point. Allowed values are 1 (the default, meaning forwards) and -1, meaning backwards
* @param {Object} [params.paintStyle] A style object in the form used for paintStyle values for Endpoints and Connectors.
*/

/**
* This is a specialized instance of Arrow in which jsPlumb hardcodes &#x60;foldback&#x60; to 2, meaning the Arrow turns into a Diamond
* @class Overlays.Diamond
* @param {Object} params Constructor parameters
* @param {Integer} [params.width=20] Width of the diamond.
* @param {Integer} [params.length=20] Length of the diamond.
* @param {Float} [params.location=0.5] Where, either as a proportional value from 0 to 1 inclusive, or as an absolute value (negative values mean distance from target; positive values greater than 1 mean distance from source) the Diamond should appear on the Connector
* @param {Object} [params.paintStyle] A style object in the form used for paintStyle values for Endpoints and Connectors.
*/

/**
* Provides a text label with which to decorate Connectors or Endpoints. jsPlumb draws a Label overlay as a styled DIV.  You can style a Label
* using the &#x60;cssClass&#x60; parameter, or - if you need to programmatically generate the appearance - the &#x60;labelStyle&#x60; parameter.     
* @class Overlays.Label
* @constructor
* @param {Object} params Constructor parameters
* @param {String|Function} label - The text to display. You can provide a function here instead of plain text: it is passed the component as an argument, and it should return a String.
* @param {String} [cssClass] Optional css class to use for the Label.
* @param {Float} [location=0.5] Where, either as a proportional value from 0 to 1 inclusive, or as an absolute value (negative values mean distance from target; positive values greater than 1 mean distance from source) the Label should appear on the Connector
* @param {Object} [labelStyle] Optional object containing properties for the label&#x27;s style. Use this if you need to prgrammatically generate the label&#x27;s appearance.
* @param {String} [labelStyle.cssClass] css class for the label (you can also use the &#x60;cssClass&#x60; parameter on the label; this exists for historical reasons)
* @param {String} [labelStyle.font] A string specifying a font to use, in valid CSS format.
* @param {String} [labelStyle.color] A string specifying a font color to use, in valid CSS format.
* @param {String} [labelStyle.fill] A string specifying the background for the label, in valid CSS format.
* @param {String} [labelStyle.borderStyle] A string specifying the border color for the label, in valid CSS format.
* @param {Integer} [labelStyle.borderWidth] Width of the border&#x27;s label
* @param {Integer} [labelStyle.padding] Padding for the label.
*/

    </pre>
</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

        </div>
    </div>
    
    <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-49979015-1', 'auto');
    ga('send', 'pageview');

</script>

    
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="../assets/js/yui-prettify.js"></script>
<script src="../assets/../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script>
</body>
</html>
